<template>
  <div class="w-full h-full overflow-hidden flex flex-col justify-between">
    <div class="flex justify-center items-center">
      <el-radio-group v-model="tabActive">
        <el-radio-button v-for="(item, i) in names" :label="item.name" :value="i" />
      </el-radio-group>
    </div>
    <div class="grow-[1] h-0 mt-[10px]">
      <el-scrollbar always ref="scrollbarRef" class="h-full w-full overflow-hidden">
        <div class="grid grid-flow-col gap-x-[5px]">
          <div class="" v-for="(item, i) in arrList[tabActive]?.list || []" :key="i">
            <div
              class="border h-[34px] flex justify-center items-center"
              :class="{
                'bg-[#f6f6f6]': !(i % 2)
              }"
            >
              {{ item.name }}
            </div>
            <ul
              class="flex justify-between items-center border !border-t-0"
              v-for="(jtem, j) in item.arr"
              :key="j"
              :class="{
                'bg-[#f6f6f6]': !(i % 2)
              }"
            >
              <li
                class="w-[50px] flex justify-center items-center"
                :class="{
                  'text-red': jtem.Key.includes('红波'),
                  'text-green': jtem.Key.includes('绿波'),
                  'text-blue': jtem.Key.includes('蓝波')
                }"
              >
                <template v-if="!isNaN(jtem.Key as any)">
                  <lhcBall type="large" :num="Number(jtem.Key)"></lhcBall>
                </template>
                <template v-else>
                  {{ jtem.Key }}
                </template>
              </li>
              <li
                class="flex-1 w-0 flex justify-center items-center py-[5px] pr-[10px]"
                :class="{
                  active: jtem.Val > 0
                }"
              >
                <el-input class="!w-full" size="small" readonly :model-value="jtem.Val"></el-input>
              </li>
            </ul>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import lhcBall from "@/components/ball/lhc-ball.vue";
import { ElScrollbar } from "element-plus";
import { cloneDeep } from "lodash-es";

const props = withDefaults(
  defineProps<{
    list: MonitorMoTableList;
  }>(),
  {}
);
const names = [
  { name: "特码", arr: ["特码", "特码-两面", "特码头数", "特码尾数"] },
  { name: "正码", arr: ["正码", "正码一", "正码二", "正码三", "正码四", "正码五", "正码六"] },
  { name: "正码特", arr: ["正一特", "正二特", "正三特", "正四特", "正五特", "正六特"] },
  { name: "色波", arr: ["红波", "绿波", "蓝波", "半波", "半半波"] },
  { name: "一肖尾数", arr: ["一肖", "尾数"] },
  { name: "连码", arr: ["二中二", "三中二", "三中三", "特串"] },
  { name: "连肖", arr: ["二肖", "三肖", "四肖", "五肖"] },
  { name: "其他", arr: ["正肖", "总肖", "十二生肖", "五行", "两面"] }
];
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();

const tabActive = ref(0);
const arrList = ref<{ name: string; list: MonitorMoTableList }[]>([]);
watch(
  () => props.list,
  val => {
    arrList.value = cloneDeep([]);
    for (let i = 0; i < names.length; i++) {
      let list: MonitorMoTableList = [];
      for (let j = 0; j < names[i].arr.length; j++) {
        const cur = val.find(item => item.name === names[i].arr[j]);
        if (cur) {
          list.push(cur);
        }
      }
      arrList.value.push({ name: names[i].name, list: list });
    }
    scrollbarRef.value?.setScrollTop(0);
  }
);
watch(
  () => tabActive.value,
  () => {
    scrollbarRef.value?.setScrollTop(0);
  }
);
</script>
<style lang="scss" scoped>
.active {
  :deep() {
    .el-input {
      --el-input-bg-color: #dff7ff;
    }
  }
}
:deep() {
  .el-input__inner {
    text-align: center;
  }
}
</style>
